<template>
    <div class="payDialog-view">

      <el-dialog
        title="收费"
        :visible.sync="dialogVisible"
        width="30%"
        :close-on-click-modal="closed"
        :close-on-press-escape="closed"
        :before-close="handleClose">
        <div>
          <div class="dialog-item price">
            <div class="dialog-title">实收金额：</div>
            <span class="big">¥{{data.receipts_amount.toFixed(2)}}</span>
          </div>
          <div class="dialog-item">
            <div class="dialog-title">付款方式：</div>

            <div>


              <el-radio-group v-model="radio" @change="radioChange">
                <el-radio label="1">现金</el-radio>
                <el-radio label="2">移动支付(支付宝/微信)</el-radio>
<!--                <el-radio label="4">银行卡</el-radio>-->
<!--                <el-radio label="5">医保卡</el-radio>-->
              </el-radio-group>
            </div>

          </div>

          <div class="dialog-item" v-if="radio == 2">
            <div class="codeBox orange" v-if="scanCodeState == 1">
              <img src="../../../assets/img/payOrDrug/waitCode_icon.png">
              <span>待支付扫码</span>
            </div>
            <div class="codeBox green" v-else>
              <img src="../../../assets/img/payOrDrug/cmpCode_icon.png">
              <span>扫码已完成</span>
            </div>
          </div>

          <div class="dialog-item" v-if="radio == 1">
            <div class="dialog-title">付款金额：</div>

            <div>
              <el-input v-if="radio == 1" v-model="input" @keyup.native="proving" placeholder="请输入内容"></el-input>
              <span v-else>¥{{data.total_amount}}</span>
            </div>

          </div>

          <div class="dialog-item" v-if="radio == 1">
            <div class="dialog-title">找零：</div>

            <div>
              <span>¥{{otherPrice.toFixed(2)}}</span>
            </div>

          </div>
        </div>
        <div slot="footer" class="dialog-footer" >
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="confimClick" v-if="radio == 1">确 定</el-button>
        </div>
      </el-dialog>

    </div>
</template>

<script>
  import scanCode from "../../../utils/scan";
    export default {
        name: "payDialog",
        data:function () {
            return{
                dialogVisible:false,
                closed:false,
                radio:"1",
                input:'',
                data:{
                    receipts_amount:0,
                },
                otherPrice:0,
                scanCodeState:1,
            }
        },
        methods:{
            radioChange:function(){
                if (this.radio == 2){
                    this.scanCodeState = 1;
                    scanCode.scanCode((data)=>{
                        this.$set(this.data,"auth_code",data.pay_code);
                        this.scanCodeState = 2;
                        this.$set(this.data,"pay_type",Number(data.pay_type));
                        this.confimClick();
                    })
                }else {
                    scanCode.removeFun();
                }
            },
            confimClick:function(){
                if (this.radio == "1"){

                    if (Number(this.input).toFixed(2) < Number(this.data.receipts_amount).toFixed(2)){
                        this.$message.error('现金不足，无法支付');
                        return;
                    }
                    this.$set(this.data,"pay_type",Number(this.radio));
                }

                this.$emit("pay-confirm",this.data);
                this.dialogVisible = false;
                this.input = 0;
                this.otherPrice = 0;
                this.radio = "1"
                this.scanCodeState = 1;

            },
            handleClose:function () {
                this.dialogVisible = false;
                this.radio = "1"
                this.input = 0;
                this.otherPrice = 0;
                this.scanCodeState = 1;

            },
            openDialog:function (data) {
                this.data = data;
                this.input = data.receipts_amount.toFixed(2)
                this.dialogVisible = true;
            },
            proving:function() {
                let str = this.input
                // this.form.skus[e].Price 是input的值　　
                // 先把非数字的都替换掉，除了数字和.
                str = str.replace(/[^\d.]/g, '');
                // 必须保证第一个为数字而不是.
                str = str.replace(/^\./g, '');
                // 保证只有出现一个.而没有多个.
                str = str.replace(/\.{2,}/g, '');
                // 保证.只出现一次，而不能出现两次以上
                str = str.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
                let index = -1
                for (let i in str) {
                    if (str[i] === '.') {
                        index = i
                    }
                    if (index !== -1) {
                        if (i - index > 2) {
                            str = str.substring(0, str.length - 1)
                        }
                    }
                }

                this.otherPrice = Number(str) - this.data.receipts_amount;
                this.input = str;

            },
        }
    }
</script>

<style lang="scss">
  @import "@/assets/scss/payOrDrug/payDialog.scss";
</style>
